<template>
  <!-- <ContentWrap> -->
  <el-row>
    <el-col v-for="(item, index) in workstationDataList" :key="`workstation-${index}`" :xl="4" :lg="4" :md="6" :sm="6" :xs="12">
      <el-card shadow="hover" class="mr-5px mt-5px mb-5px">
        <div class="flex">
          <div class="mr-16px align-top">
            <img src="@/assets/imgs/receipt.jpg" alt="" class="index-img"/>
          </div>
          <div v-if="item.label == '未完成'" @click="gotoInternalDetail(2, item)">
            <div class="text-20px">{{ item.label }}</div>
            <div class="mt-10px text-14px text-gray-500">
              {{ item.value }}
            </div>
          </div>
          <div v-if="item.label != '未完成' && item.label != '总数'" @click="gotoInternalDetail(1, item)">
            <div class="text-20px">{{ item.label }}</div>
            <div class="mt-10px text-14px text-gray-500">
              {{ item.value }}
            </div>
          </div>
          <div v-if="item.label == '总数'">
            <div class="text-20px">{{ item.label }}</div>
            <div class="mt-10px text-14px text-gray-500">
              {{ item.value }}
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <el-row class="mt-8px" :gutter="8" justify="space-between">
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
      <ContentWrap>
        <!-- 搜索工作栏 -->
        <el-form
          class="mb-5px"
          :model="queryParams2"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="订单编号" prop="cacheOrderCode">
            <el-select
              placeholder="请选择订单编号"
              clearable
              class="!w-240px"
              v-model="queryParams2.cacheOrderCode"
              @change="getList4"
            >
              <el-option v-for="item in cacheOrderList" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>

          <el-form-item label="快速溯源" prop="code">
            <el-input style="display: none;" />
            <el-input
              v-model="queryParams2.code"
              placeholder="请扫描"
              clearable
              class="!w-240px"
              @keyup.enter="getList2"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="exportWord"><Icon icon="ep:refresh" class="mr-5px" /> 导出</el-button>
          </el-form-item>
        </el-form>

        <div v-for="(item, index) in list2" :key="`traceability-${index}`">
          <div class="mb-15px">{{ item }}</div>
        </div>
      </ContentWrap>
    </el-col>

    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24">
      <ContentWrap>
        <el-table v-loading="loading" :data="list" ref="reportTable">
          <el-table-column label="订单编号" align="center" prop="orderCode" />
          <el-table-column label="规格型号" align="center" prop="flex" />
          <el-table-column label="长度" align="center" prop="len" />
          <el-table-column label="内码" align="center" prop="internalCode" />
          <el-table-column label="工位" align="center" prop="workstationName" />
          <el-table-column label="数值" align="center" prop="workstationValue" />
          <el-table-column label="操作时间" align="center" prop="operatorTime" />
        </el-table>
      </ContentWrap>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.el-card__body {
  padding: 0 !important;
}
.index-img {
  width: 50px;
  height: 50px;
  vertical-align: top;
}
</style>

<script lang="ts" setup>

import { useUserStore } from '@/store/modules/user'
import * as homeApi from '@/api/hcxly/home/Index'
import router from "@/router";
import download from "@/utils/download";
defineOptions({ name: 'home' })
const userStore = useUserStore()
const loading = ref(true)
const message = useMessage() // 消息弹窗

const workstationQueryParams = reactive({
  cacheOrderCode: null,
  deptId : userStore.getUser.deptId
})

const workstationDataList = ref([]) // 列表的数据
const getList = async () => {
  loading.value = true
  try {
    workstationDataList.value = await homeApi.listCurrentUserWorkstationOrderInfo(workstationQueryParams.deptId, workstationQueryParams.cacheOrderCode);
  }finally {
    loading.value = false
  }
}

const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const cacheOrderList = ref([])

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: undefined,
  name: undefined,
  orderDetailId: undefined,
  orderType: "home",
  cacheOrderCode: undefined
})


/** 查询实时生产列表 */
const getList3 = async () => {
  loading.value = true

  try {
    const data = await homeApi.getRealtimeProduct(queryParams)
    list.value = data.list
  } finally {
    loading.value = false
  }
}

const list2 = ref([])
const queryParams2 = reactive({
  pageNo: 1,
  pageSize: 10,
  code: '',
  cacheOrderCode: null
})
/** 查询扫码溯源 */
const getList2 = async () => {
  console.log(queryParams2)
  loading.value = true
  try {
    list2.value = await homeApi.getCodeRetrospect(queryParams2)
    console.log(list2.value)

    // total.value = data.total
  } finally {
    loading.value = false
  }
}
const reportTable = ref()

/**
setInterval(() => {
  getList()
  getList3()
}, 3000);
**/

const gotoInternalDetail = (type, item) => {
  if(type == 1){
    router.push({
      name: 'productionScheduleReport3',
      query: {
        cacheOrderCode: queryParams2.cacheOrderCode,
        labelType: item.labelType,
        labelTypeValue: item.labelTypeValue
      }
    })
  }else {
    router.push({
      name: 'unfinishReport',
      query: {
        finishStatus: 'unfinish',
        cacheOrderCode: queryParams2.cacheOrderCode
      }
    })
  }
}

const handleQuery = () => {
  getList2();
}

const exportWord = async () => {
  try {
    await message.exportConfirm();
    loading.value = true
    const data = await homeApi.exportWord(queryParams2);
    download.excel(data, '追溯报告.txt');
  }catch {

  } finally {
    loading.value = false
  }
}

const listCacheOrder = async () => {
  try {
    cacheOrderList.value = await homeApi.listCacheOrder();
  }finally {

  }
}

const getList4 = async () => {
  if(queryParams2.cacheOrderCode == null || queryParams2.cacheOrderCode == '' || queryParams2.cacheOrderCode == undefined){
    queryParams2.cacheOrderCode = cacheOrderList.value[0];
  }

  queryParams.cacheOrderCode = queryParams2.cacheOrderCode
  workstationQueryParams.cacheOrderCode = queryParams2.cacheOrderCode

  await getList();
  await getList3();
}

/** 初始化 **/
onMounted(() => {
  getList()
  getList3()
  listCacheOrder()
})

</script>
